<template>
	<u-popup :show="showDetails" @close="showDetails = false" :round="10" closeable>
		<view class="cu-modal bottom-modal">
			<view class="cu-dialog bg-white" @tap.stop="" style="padding-top: 20px;">
				<!-- 关闭 -->
				<view class="action cuIcon-close close" @tap="showDetails = false"></view>
				<view class="mail-item" style="max-height: 70vh;overflow: auto;">
					<div class="flex align-start">
						<div class="imgbox" v-if="info.img_url && info.img_url.length > 0">
							<image :lazy-load="true" :src="info.img_url[0] + '?imageView2/0/w/200'" mode="aspectFill"></image>
						</div>
						<div class="info flex-sub">
							<div class="name ">
								{{ info.name }}
								<text class="ml10 u-primary">{{ info.product_dengji_ }}</text>
							</div>
							<view class="subname mt20 flex-sub text-cut">{{ info.supplier_name }}</view>
							<view class="tags mt10" v-if="info.is_yanxuan == 1 || info.is_seckill == 1 || info.lable&&info.lable.length > 0">
								<image v-if="info.is_yanxuan == 1" class="tag" src="/static/tag.png" mode="heightFix"></image>
								<image v-if="info.is_seckill == 1" class="tag" src="/static/tag2.png" mode="heightFix"></image>
								<image class="tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in info.lable"></image>
							</view>
							<div class="mt20 flex align-end">
								<text class="price">￥{{ info.price }}</text>
								<view class="oldprice ml10" v-if="info.is_green_price == 1">
									<text class="unit">¥</text>
									<text style="line-height: 0.9;">{{ info.green_price }}</text>
									<image class="vip" :src="`${assetsPath}/vip.png`" mode="widthFix"></image>
								</view>
							</div>
							<div class="mt20">
								<span>库存:{{ info.stock }}</span>
								<span class="ml30">销量:{{ (info.sales || 0) - 0 + ((info.f_sales || 0) - 0) }}</span>
							</div>
						</div>
					</div>
					<view class="goodsinfo mt20 mb40 flex align-center">
						<div class="title">数量：</div>
						<numberbox :showMinus="true" :value="num" @change="changeNum" :max="maxNum"></numberbox>
					</view>
					<u-button @click="addCar" shape="circle" :loading="btnLoading" type="success">确定</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import Numberbox from '@/components/numberbox.vue';
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			showDetails: false,
			info: {},
			num: 1,
			maxNum: 9999,
			btnLoading: false,
			custom: {}
		};
	},
	components: {
		Numberbox
	},
	methods: {
		...mapActions(['getCarCount']),
		//custom 自定义参数
		show(info, custom = {}) {
			this.custom = { ...custom };
			this.num = info.cart_num || 1;
			this.info = info;
			this.maxNum = info.stock;
			this.showDetails = true;
		},
		changeNum(e) {
			this.num = e.value;
		},
		addCar() {
			let pid = this.info.pid || this.info.id;
			this.inputCar(pid);
		},
		inputCar(pid) {
			this.$postAction(
				this.$api.inputCar + pid,
				{
					num: this.num
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
					let info = { ...this.info };
					info.cart_num = this.num;
					this.$emit('changeNum', info, this.custom);
					this.getCarCount();
					this.showDetails = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.cu-modal {
	.cu-dialog {
		width: 600upx;
		text-align: left;
		position: relative;
		line-height: 1;
	}
	&.bottom-modal {
		.cu-dialog {
			width: 100%;
		}
	}
	.title {
		color: #000;
		font-size: 28upx;
		font-weight: blod;
	}

	.cuIcon-close {
		font-size: 40upx;
		color: #303030;
	}

	.cu-modal-ft {
		color: #fff;
		text-align: center;
		font-size: 24upx;
		line-height: 70upx;
		background: #ff6202;
	}

	.replylist {
		max-height: 300px;
		overflow: auto;
	}

	.close {
		position: absolute;
		right: 56upx;
		top: 30upx;
		z-index: 1;
	}
}

.mail-item {
	text-align: left;
	font-size: 24upx;
	color: #9f9f9f;
	padding: 40upx 50upx;
	position: relative;

	.imgbox {
		width: 200upx;
		height: 200upx;
		background: #fff;
		overflow: hidden;
		border: 1px solid #e8e8e8;
		border-radius: 10upx;
		margin-right: 20upx;

		image {
			width: 100%;
		}
	}

	.name {
		font-size: 34upx;
		color: #000;
		font-weight: bold;
	}

	.price {
		font-style: normal;
		display: inline-block;
		color: #e03d3e;
		font-size: 38upx;
	}
	.oldprice {
		font-size: 28upx;
		font-weight: 500;
		color: #2c3664;
		line-height: 1;
	}
	.vip {
		width: 77upx;
		height: 30upx;
	}
	.tags {
		margin: 0 -5upx;
		height: 32upx;
		// overflow: hidden;
		.tag {
			height: 32upx;
			margin: 5upx;
		}
	}
}
</style>
